// 1. store/index.js
import {defineStore} from 'pinia'

// 2.创建一个状态管理对象、配置
// 细节：
// 2.1 counter 是状态的编号，自己取的名字，相当于分组
// 2.2 store对象 命名规范
// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 2.3 配置方法有2种风格
// 方式1：同vue2 选项式风格
// 方式2：Vue 3 组合式api风格
const useCountStore = defineStore('counter',{
   //2.4 配置项：state、actions 与 getters
   //这儿用 方式1 选项式风格 配置
   state:()=>{
       return {
           //状态
           count:100  //定义了一个状态 count,默认值为0
       }
   },
   getters:{
        // 类似计算属性，基于state 的产生的新数据，是特殊的state,
        // 在页面中使用 getter的时候 ，同state
        // num10(state){
        //     return state.count+10;
        // }
        num10:(state)=> state.count+10
   },
   actions:{
       increment(){
           console.log(9999)
           this.count++;
       },
       reduce(){
           console.log(8888)
           this.count--;
       }
   }
})

export default useCountStore;